import React from 'react'

import {Animated, ART, Dimensions} from 'react-native';

const {Surface, Shape, Path, ClippingRectangle, Pattern, LinearGradient, RadialGradient, Group, Text} = ART;

/**
 * 模仿支付宝蚂蚁深林雪花效果
 */

class Snow extends React.Component {

  static defaultProps = {
    center: {x: 20, y: 20},
    r: 10,
  }

  render() {
    const {center, r} = this.props;
    return (

      <Shape opacity={1} d={this.circlePath(center.x, center.y, r)} fill="#fff" strokeWidth={0}/>

    )
  }

  circlePath = (cx, cy, r, startDegree = 0, endDegree = 360) => {
    const p = Path();
    const {amplitude, height} = this.props;
    p.path.push(0, cx + r, cy);
    p.path.push(4, cx + amplitude, cy + height, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1);
    return p;
  }
}

const AnimatedSnow = Animated.createAnimatedComponent(Snow);

export default class FallSwingSnow extends React.Component {

  state = {
    amplitude: new Animated.Value(0),
    height: new Animated.Value(-this.props.r ),
  }

  componentDidMount() {
    this.startAnimate(10);
  }

  render() {
    const {center, r} = this.props;

    return (
      <AnimatedSnow center={center} r={r} amplitude={this.state.amplitude} height={this.state.height}/>
    )
  }

  startAnimate = (time) => {
    const {delay,height,amplitude,r} = this.props;
    const realHeight = height+r;
    const costTime = 1000 * time+delay;
    Animated.sequence([
      Animated.delay(delay),

      Animated.parallel([
        Animated.timing(this.state.height, {
          toValue: realHeight,
          duration: costTime,
        }),
        Animated.timing(this.state.amplitude, {
          toValue: amplitude,
          duration: costTime / 2,
        }).start(() => {
          Animated.timing(this.state.amplitude, {
            toValue: 0,
            duration: costTime / 2,
          })
        }),]),
    ]).start(()=>this.setState({
      amplitude: new Animated.Value(0),
      height: new Animated.Value(-this.props.r ),
    },()=>this.startAnimate(10)))
  }
}



